<template>
    <div class="tab-control">
        <div class="tab-control-item"
            v-for="(item, index) in titles" :key="index"
             @click="itemClick(index)"
             :class="{active:index == $store.state.homeTabsCurrentIndex}"
        >
                <span>{{item}}</span>
        </div>

    </div>
</template>

<script>


    export default {
        name: "TabControl",
        props: {
            titles: {
                type:Array,
                defualt() {
                    return []
                }
            }
        },
        methods:{
            itemClick(index){
                this.$store.commit('setHomeTabsCurrentIndex', index);
                this.$emit('tabClick', index);
            }
        },

    }
</script>

<style scoped lang="less">
    .tab-control {
        background:#151413;
        display: flex;
        height:40px;
        line-height: 40px;
        text-align: center;
        font-size:14px;
        width:100%;
        max-width:550px;
        margin:0 auto;
        z-index: 9;

        position: sticky;
        top:60px;


        .tab-control-item {
            flex:1;
            span {
                padding:6px;
                color:#EFEFEF;
            }
        }

        .active {
            color:#FFBF00;
            span {
                border-bottom: 3px solid #FFBF00;
            }
        }
    }
</style>